<!-- banner 组件 -->
<template>
  <div class="banner-vue" v-show="list.length" @mouseenter="mouseover" @mouseleave="mouseout">
    <ul class="banner-box">
      <li v-for="data in list">
        <a v-if="data.href" :href="data.href"><img :src="data.img"></a>
      </li>
    </ul>
    <div @click="next" class="btn btn-right">
      <i class="iconfont">&#xe604;</i>
    </div>
    <div @click="prev" class="btn btn-left">
      <i class="iconfont">&#xe603;</i>
    </div>
    <div class="has-pager">
      <span v-for="data in list.length" :class="{'cur':index == $index}" @click="switchF(data)"></span>
    </div>
  </div>
</template>
<script>
  var animate = require("../../resources/public/js/animate.js");
  export default{
    data(){
      return {
        bannerList:null,
        index:0,
        Nindex:1,
        timer:null,
        switchs:true
      }
    },
    props:{
      //轮播数据
      list:{
        type:Array
      },
      //数据是同步还是异步(默认false)
      sync:{
        type:Boolean,
        default:false
      },
      //是否自动轮播(默认false)
      auto:{
        type:Boolean,
        default: true
      },
      //自动轮播间隔时间(默认三秒)
      items:{
        type:Number,
        default:3000
      },
      //默认轮播方向(默认true向前)
      direction:{
        type:Boolean,
        default:true
      },
      //鼠标移入是否停止
      hoverStop:{
        type:Boolean,
        default:true
      }
    },
    methods:{
      init:function(){
        this.bannerList = this.$el.getElementsByTagName('ul')[0].getElementsByTagName("li");
        this.auto && this.autoPlay();
        animate(this.bannerList[0] , {opacity:100});
      },
      autoPlay:function(){
        var th = this,
            play = th.direction ? th.next : th.prev;
            clearInterval(th.timer);
            th.timer = setInterval(function(){
              play();
            } , th.items);
      },
      prev:function(){
        this.Nindex = this.index;
        this.index--;
        if(this.index < 0){
          this.index = (this.list.length - 1);
        };
        this.play();
      },
      next:function(){
        this.Nindex = this.index;
        this.index++;
        if(this.index > (this.list.length - 1)){
          this.index = 0;
        };
        this.play();
      },
      play:function(){
        animate(this.bannerList[this.index] , {opacity:100});
        animate(this.bannerList[this.Nindex] , {opacity:0});
      },
      //移入
      mouseover:function(){
        this.hoverStop && this.auto && clearInterval(this.timer);
      },
      //移开
      mouseout:function(){
        this.hoverStop && this.auto && this.autoPlay();
      },
      //原点切换
      switchF:function(i){
        this.Nindex = this.index;
        this.index = i;
        this.play();
      }
    },
    ready(){
      var th = this;
      if(th.sync || th.list.length){
        //调用初初始化
        th.init();
      }else{
        //数据监控
        th.$watch("list" , function(){
          th.init();
        });
      };
    }
  }
</script>
<style scoped>
  .banner-vue,
  .banner-vue .banner-box{
    position:relative;
  }
  .banner-vue,
  .banner-vue .banner-box,
  .banner-vue li{
    width:100%;
    height:100%;
    overflow:hidden;
  }
	.banner-vue{
		border: 1px solid #eaeaea;
		margin-bottom: 30px;
		height: 400px;
		border-radius: 4px;
		overflow: hidden;
	}
  .banner-vue li{
    position:absolute;
    top:0;
    left:0;
    opacity:0;
  }
  /*按钮*/
  .banner-vue .btn{
    width:55px;
    height:120px;
    position:absolute;
    top:50%;
    margin-top:-60px;
    cursor:pointer;
    text-align:center;
    line-height:120px;
    -webkit-transition:all 0.3s;
    -moz-transition:all 0.3s;
    -ms-transition:all 0.3s;
    transition:all 0.3s;
    opacity:0;
  }
  .banner-vue .btn i{
    font-size:55px;
    color:#fff;
  }
  .banner-vue .btn:hover i{
    color:#3298D6;
  }
  .banner-vue .btn-right{
    right:-75px;
  }
  .banner-vue .btn-left{
    left:-75px;
  }
  /*鼠标移入*/
  .banner-vue:hover .btn-right{
    right:20px;
    opacity:1;
  }
  .banner-vue:hover .btn-left{
    left:20px;
    opacity:1;
  }
  .banner-vue .has-pager{
    width:100%;
    position:absolute;
    bottom:10px;
    text-align:center;
  }
  .banner-vue .has-pager span{
    display:inline-block;
    width:12px;
    height:12px;
    border:1px solid #fff;
    margin:0 5px;
    border-radius:50%;
    overflow:hidden;
    line-height:12px;
    text-align:center;
    cursor:pointer;
    -webkit-transition:background 0.3s;
    -moz-transition:background 0.3s;
    -ms-transition:background 0.3s;
    transition:background 0.3s;
  }
  .banner-vue .has-pager .cur,
  .banner-vue .has-pager span:hover{
    background:#fff;
  }
</style>
